import React, { Component } from 'react'
import { Route, Link, Outlet, NavLink } from 'react-router-dom'
import Message from '../Message'
import News from '../News'

export default function Home() {
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <NavLink
              to="/home/news"
              style={({ isActive }) => {
                return isActive
                  ? { backgroundColor: 'pink', color: 'red' }
                  : undefined
              }}
            >
              News
            </NavLink>
          </li>
          <li>
            <NavLink
              to="/home/message"
              style={({ isActive }) => {
                return isActive
                  ? { backgroundColor: 'pink', color: 'red' }
                  : undefined
              }}
            >
              Message
            </NavLink>
          </li>
        </ul>
        <div>
          <div>
            {/* <News></News>
            <Message></Message> */}
            {/* Outlet写在哪里,Home组件中的嵌套路由就渲染在哪里 */}
            <Outlet></Outlet>
          </div>
        </div>
      </div>
    </div>
  )
}
